<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>

        <el-tabs>
          <!-- 左侧 -->
          <el-tab-pane label="客户管理">
            <el-table row-key="id" :data="list" border>
              <el-table-column label="序号" type="index" show-overflow-tooltip width="50">
                <template #default="{ row }">
                  <!-- <i class="el-icon-receiving" /> -->
                  {{ row.id }}
                </template>
              </el-table-column>
              <el-table-column prop="id"  label="用户id" width="70" />
<!--               <el-table-column prop="openId"  label="微信唯一标识" width="110" /> -->
              <el-table-column prop="name" label="用户名" />
              <el-table-column prop="country" label="国家" />
              <el-table-column prop="address" label="地址" width="220"/>
              <el-table-column prop="levelId" label="会员等级" />
<!--               <el-table-column prop="password" label="登陆密码" /> -->
              <el-table-column prop="phone" label="手机号" width="120"/>
<!--               <el-table-column prop="avatar" label="用户头像" /> -->
              <el-table-column prop="genderName" label="性别" />
              <el-table-column prop="email" label="邮箱" width="120"/>
              <el-table-column prop="inviterid" label="邀请人姓名" />
              <el-table-column prop="createTime" label="创建时间" width="200"/>
              <el-table-column prop="updateTime" label="修改时间" width="200"/>

              <el-table-column label="操作" fixed="right"  width="150">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>

              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span>确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteComfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
    
    <!-- 分页 -->
    <div align="center">
      <el-pagination
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="编辑" :visible="showDialog" @close="closeDialog">
      <el-form label-width="110px">
        <el-form-item label="用户id" prop="id">
          <el-input v-model="formData.id" disabled />
        </el-form-item>
        <!-- <el-form-item label="微信唯一标识">
          <el-input v-model="formData.openId" disabled />
        </el-form-item> -->
        <el-form-item label="用户名">
          <el-input v-model="formData.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="formData.country" placeholder="请输入国家" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formData.address" placeholder="地址" />
        </el-form-item>

        <el-form-item label="会员等级">
          <el-input v-model="formData.levelId" placeholder="会员等级" />
        </el-form-item>

        <!-- <el-form-item label="登陆密码">
          <el-input v-model="formData.password" placeholder="登陆密码" />
        </el-form-item> -->
        <el-form-item label="手机号">
          <el-input v-model="formData.phone" placeholder="手机号" />
        </el-form-item>
        <!-- <el-form-item label="用户头像">
          <el-input v-model="formData.password" placeholder="用户头像" />
        </el-form-item> -->
        <el-form-item label="性别">
          <el-radio v-model="formData.gender" :label="true">男</el-radio>
          <el-radio v-model="formData.gender" :label="false">女</el-radio>
          <!-- <el-switch
            v-model="formData.gender"
            :active-text="formData.gender?'男':'女'">
          </el-switch> -->
          <!-- <el-input v-model="formData.state" placeholder="请输入状态" /> -->
        </el-form-item>
         <el-form-item label="邮箱">
          <el-input v-model="formData.email" placeholder="邮箱" />
        </el-form-item>
         <el-form-item label="邀请人id">
          <el-input v-model="formData.inviterid" placeholder="邀请人id" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: right;">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="clickSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import { selectUser,updateUser,deleteUser } from '@/api/role'
export default {

  data() {
    return {
      dialogVisible: false,
      // 分页数据
      currentPage: 1,
      list: [],
      showDialog: false,
      formData: {
        // enVisible: '0', // 0不开启, 1开启 (注意: 不是布尔值, 所以将来需要处理switch)

        openid:'',
        name: '',
        levelid: '',
        password: '',
        phone: '',
        avatar:'',
        gender:'',
        email:'',
        inviterid:'',
        createTime:'',
        updateTime:'',
      
      },
      loading: false,
      permissionData: [], // 存放用于展示的权限列表数据 (树形结构)
      total:0,
      pageSize:10,
      showDialog:false
    }
  },
  
  mounted() {
    console.log('进入页面的钩子函数')
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {

      const data = await selectUser({
        page:this.currentPage,
        num:this.pageSize
      })
      data.list.map((item)=>{
        item.genderName=item.gender?'男':'女'
      })
      this.list = data.list
      this.total = data.total
    },
    
 
    // 删除功能
    handleDelete(id) {
      this.deleteId = id
      this.dialogVisible = true
    },
    async deleteComfirm() {
      this.dialogVisible = false
      await deleteUser({
        id: this.deleteId
      })
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.getPermissionList()
    },
    // 点击查看编辑按钮, 显示弹框
    clickEdit(id) {
      // 显示弹框
      this.showDialog = true
      this.loading = true
      // 发送请求, 获取数据, 进行回显
      // const { data } = await reqGetPermissionDetail(id)
      // this.formData = data

      this.loading = false
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val;
      page:this.currentPage,
      this.getPermissionList()
    },
    handleEdit(row){
      this.showDialog=true
      this.formData = row
    },
    closeDialog(){
      this.showDialog=false
    },
    async clickSubmit(){
      this.showDialog= false;
      const res = await updateUser(this.formData)
      this.$message.success(res)
      this.getPermissionList()
    }
  }
}
</script>

<style>

</style>
  <!-- 表格 -->
           